<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>精彩视频</title>
		<link rel="stylesheet" href="css/upWindow.css" />
		<link rel="stylesheet" href="css/MomPhotoDetail.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/base.css" />
		<script type="text/javascript" src="bootstrap/js/jquery1.11.3.js"></script>
		<script type="text/javascript" src="js/dom/jquery.js"></script>
		<script type="text/javascript" src="js/register.js"></script>
		<script type="text/javascript" src="js/topPublic.js"></script>
		<script type="text/javascript" src="js/banner.js"></script>
	</head>

	<body>
		<!--<a href="#top" hidden></a>-->
		<script type="text/javascript" src="js/header.js"></script>
		<div class="banner-img">
			<img src="img/img_02.png" />
		</div>
		<div class="main-part">
			<div class="main-part-left">
				<p class="title" id="video_titel"></p>
				<iframe class="video_content" src="" frameborder=0 allowfullscreen></iframe>

				<div class="add-comments">
					<div class="word-limit">
						<span id="counter" class="span1">0</span>
						<span>/</span>
						<span>300</span>
					</div>
					<textarea maxlength="300" class="mes" id="status" name="status" rows="6" cols="40"  placeholder="看到槽点，不吐不快！别憋着，马上大声说出来吧！"></textarea>
					<span class="addcomm" onclick="publishcomm()">发表评论</span>
					<ul class="all-comments">
						<li class="comm-list no-pad">
							<span class="comm-list-title2 comm-list-title-che" id="one2" onclick="submitcomm(getQueryString('sid'))">全部评论<span class="totalRowNumber totalRowNumber1"></span></span>
							<span class="comm-list-title2" id="two2" onclick="submitmycomm($('#sid').val())">我的评论<span class="totalRowNumber totalRowNumber2"></span></span>
						</li>
						<ul class="all-comments-one" id="all-comments-one2">
							<div class="commbox"></div>
						</ul>
					</ul>
				</div>
			</div>
			<div class="main-part-right">
				<p style="width:380px;height:54px;background-color: #EB6100;overflow: hidden;">
					<img style="float: left;margin: 10px 10px 10px 20px;" src="img/hot_05.png" />
					<span style="float:left;color: #ffffff;font-size: 24px;line-height: 54px;">推荐视频</span>
				</p>
				<div class="photo-scroll">
					<ul id="video_list">
						<!--视频列表-->
					</ul>
				</div>
			</div>
		</div>
		<input type="hidden" value="tv" id="navid" />
		<script type="text/javascript" src="js/footer.js"></script>
		<script>
			function getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
				var context = "";
				if(r != null)
					context = r[2];
				reg = null;
				r = null;
				return context == null || context == "" || context == "undefined" ? "" : context;
			}
			submitcomm(getQueryString('sid'));

			$(function() {

				$.ajax({
					url: '/baby/liveVideoShow/getLiveVideoShow', // 跳转到 action  
					data: {
						key: getQueryString('sid')
					},
					type: 'post',
					cache: false,
					dataType: 'json',
					success: function(data) {
						console.log(data);
						if(data.code == "2000") {
							try{
								var str = data.data;
								var title = $("#video_titel");
								var vurl = str.videoUrl
								var video = $("iframe.video_content")
	
								title.append(str.name);
								video.attr('src', vurl);
							}catch(e){
								//TODO handle the exception
							}
								

						} else if(data.code == "5001") {
							alert(data.message);

						}
					},
					error: function() {
						// view("异常！");  
						console.log("异常！");
					}
				});
			})

			$(function() {
				demo();

			});
		//右侧列表
			function demo(curr) {
				var key = $("#key").val();
				var type=getQueryString('type')
				$.ajax({
					url: '/baby/liveVideoShow/queryLiveVideoShow', // 跳转到 action  
					data: {
						pageNum: curr,
						key: key,
						type:type,
						pageSize:'50'
					},
					type: 'post',
					cache: false,
					dataType: 'json',
					success: function(data) {
						if(data.code == "2000") {
							console.log(data)
							if(data.data == null) {
								alert("没有找到数据");
								return
							}
							var datalist = data.data.dataList;

							//拼页面

							var htmlstr = '';
							for(var i = 0; i < datalist.length; i++) {
								var obj = datalist[i]; //获取单个数据对象
								//拼页面
								// console.log(obj); 								
								var comurl = 'videoDetail.html?sid=' + obj.sid
								htmlstr += '<li class="photo-part" onclick="window.location.href=\''+comurl+'\'">' +
								'<img  src="' + obj.img.realPicUrl + '" />' +
								'<p><a>' + obj.name +'</a></p>'+
								'<span class="icon-comments plnum"> '+obj.commentSum+'</span></li>'
							}
							document.getElementById("video_list").innerHTML = htmlstr
								

						} else if(data.code == "5001") {
							alert(data.message);
							

						}
					},
					error: function() {
						// view("异常！");  
						//alert("异常！");
					}
				});
			};
//(2)发表评论
		function publishcomm(){
			var commentMsg = $("#status").val();
			if(commentMsg==''){
		    	alert("请填写评论内容");
		      	return 
		    }
			var sid=$("#sid").val();
			$.ajax({
				url: '/baby/comment/addComment',
				data: {
					contentId:getQueryString('sid'),
					commentMsg:commentMsg
				},
				type: 'post',
				cache: false,
				dataType: 'json',
				success: function(data) {
					console.log(data);
					if(data.code == "2000"){
						alert(data.message);  //评论成功提示语
						$("#status").val("");
						submitcomm(getQueryString('sid'));
						demo();
					}else if(data.code == "5001"){
						$('.theme-popover-mask').show();
						$('.theme-popover-mask').height($(document).height());
						$('.theme-popover').slideDown(200);
					}
				}
			})
		}
////////所有评论////////
	function submitcomm(id){
		//var sid = $("#sid").val();
		$.ajax({
			url: '/baby/comment/queryComment',
			data: {
				key : id
			},
			type: 'post',
			cache: false,
			dataType: 'json',
			success: function(data) {
				if(data.code == "2000") {
					try{
						$(".commbox").text('');
						$(".totalRowNumber1").text('');
						$(".totalRowNumber2").text('');
						var datalist = data.data.dataList;
						var userName = '';
						var commentMsg = '';
						var str = '';
						var time = '';
						var totalRowNumber = '&nbsp;&nbsp;('+ data.data.totalRowNumber +')&nbsp;&nbsp;';
						for(i = 0; i < datalist.length; i++) {
							var img = datalist[i].user.realPicUrl;
							commentMsg = datalist[i].commentMsg;
							userName = datalist[i].user.userName;
							time = datalist[i].commentCreateTime;
							str = 	'<li class="comm-list">'+	
										'<img src="'+ img+'" />'+
										'<div class="comm-list-text">'+
											'<span style="color: #656565;font-weight: bold;">'+userName+'</span>'+
											'<span style="color: #b7b7b7;margin-left: 10px;">'+time+'</span>'+
											'<p class="word-break" id="commentMsg" style="color: #656565;line-height: 20px;margin-top: 8px;">'+commentMsg+'</p>'+
										'</div>'+
									'</li>';
							$(".commbox").append(str);
						}
						$(".totalRowNumber1").append(totalRowNumber);
						console.log(data);
					}catch(e){
						//TODO handle the exception
					}
						
				}
			},
			error: function(data) {
				console.log("服务请求的人太多"+data);
			}
		})
	}
////////我的评论////////
	function submitmycomm(sid){
		var sid=getQueryString('sid')
		$.ajax({
			url: '/baby/comment/getComment',
			data: {
				key : sid
			},
			type: 'post',
			cache: false,
			dataType: 'json',
			success: function(data) {
				if(data.code == "2000") {
					$(".commbox").text('');
					$(".totalRowNumber2").text('');
					$(".totalRowNumber1").text('');
					var datalist = data.data.dataList;
					var userName = '';
					var commentMsg = '';
					var str = '';
					var time = '';
					var totalRowNumber = '&nbsp;&nbsp;('+ data.data.totalRowNumber +')&nbsp;&nbsp;';
					var userId = '';
					var img;
					for(i = 0; i < datalist.length; i++) {
						try{
							var img = datalist[i].user.realPicUrl;
							commentMsg = datalist[i].commentMsg;
							userName = datalist[i].user.userName;
							time = datalist[i].commentCreateTime;
							userId = datalist[i].userId;
							str = 	'<li class="comm-list">'+	
										'<img src="'+ img+'" />'+
										'<div class="comm-list-text">'+
											'<span style="color: #656565;font-weight: bold;">'+userName+'</span>'+
											'<span style="color: #b7b7b7;margin-left: 10px;">'+time+'</span>'+
											'<p class="word-break" id="commentMsg" style="color: #656565;line-height: 20px;margin-top: 8px;">'+commentMsg+'</p>'+
										'</div>'+
									'</li>';
						$(".commbox").append(str);
						}catch(e){
							//TODO handle the exception
						}
					}
					$(".totalRowNumber2").append(totalRowNumber);
					console.log(data);
				}else if(data.code == "5001"){
					$('.theme-popover-mask').show();
					$('.theme-popover-mask').height($(document).height());
					$('.theme-popover').slideDown(200);
				}
			},
			error: function(data) {
				console.log("服务请求的人太多"+data);
			}
		})
	}
			//留言板字数
			document.getElementById("status").addEventListener('input',function(e){
				var len = document.getElementById("status").value.length;
				document.getElementById("counter").innerHTML = len
			})
		</script>
	</body>

</html>